<template>
    <div class="market-research-wrap">
        <analysis-section title="市场调研">
            <h-section>
                <a-form layout="inline" ref="ruleFormRef" :model="form">
                    <a-row>
                        <a-col :span="24">
                            <a-form-item label="市场调研文档" :span="24" name="doc" :rules="ruleObj['市场调研文档']">
                                <file-cell v-if="disabled" />
                                <upload-cell :fileParams="{ connectType: '市场调研文档', type: 2 }" :fileList="form.doc" @valueChange="fileChange" v-else />
                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-form>
                <flexbox justify="flex-end" class="btn-group" v-if="!disabled">
                    <a-button type="primary" @click="handleSave">保存</a-button>
                </flexbox>
            </h-section>
        </analysis-section>
    </div>
</template>

<script lang="ts">
import AnalysisSection from '@/views/productAnalysis/productDetail/components/AnalysisSection.vue';
import { UploadCell, FileCell } from '@/components';
import { validateFileValidator } from '@/utils/validator';
import { defineComponent, ref, unref, toRefs, computed } from 'vue';
export default defineComponent({
    name: 'MarketResearch',
    components: {
        AnalysisSection,
        UploadCell,
        FileCell
    },
    props: {
        detail: { type: Object, default: () => ({}) },
        disabled: { type: Boolean, default: false }
    },
    emits: ['success'],
    setup(props, { emit }) {
        const ruleFormRef = ref();
        const form = ref<any>({
            doc: []
        });
        const ruleObj = computed(() => {
            const ruleObj = {
                市场调研文档: props.disabled ? [] : [{ required: true, message: '市场调研文档不能为空', validator: validateFileValidator, connectType: '市场调研文档', trigger: 'blur', type: 'array' }]
            };
            return ruleObj;
        });
        // 监听文件删除等操作
        const fileChange = (fileList: any[]) => {
            form.value.doc = [...fileList];
        };
        const handleSave = () => {
            unref(ruleFormRef)
                .validate()
                .then(() => {
                    emit('success', {
                        query: {
                            files: form.value.doc
                        }
                    });
                });
        };
        const { files } = toRefs(props.detail);
        form.value.doc = files;
        return {
            ruleFormRef,
            form,
            ruleObj,
            fileChange,
            handleSave
        };
    }
});
</script>
<style scoped lang="less">
.market-research-wrap {
    background: #fff;
    padding: 24px 0;
    margin-top: 24px;
}
</style>